<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%
	String ctx = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>在线音乐平台</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="My Play Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript">
	
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 

</script>
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css'
	media="all" />
<!-- //bootstrap -->
<link href="css/dashboard.css" rel="stylesheet">
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="js/jquery-1.11.1.min.js"></script>
<!--start-smoth-scrolling-->
<!-- fonts -->
<link
	href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
	rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Poiret+One'
	rel='stylesheet' type='text/css'>
<!-- //fonts -->
<style type="text/css">
<!--
#main {
	height: 50px;
	width: 100%;
}

#left {
	float: left;
	height: 50px;
	width: 15%;
}

#right {
	float: left;
	height: 50px;
	width: 79%;
}
-->
</style>
</head>
<body>

	<div class="main-grids">
		<div class="side-bottom-icons">
			<ul class="nav2">
				<li style="color: black;">修改资料</li>
				<li><a href="<%=ctx%>/try.jsp" class="facebook"></a></li>
				<li style="color: black;">退出账户</li>
				<li><a href="<%=ctx%>/user/logout" class="facebook dribbble">
				</a></li>
			</ul>
		</div>
		<div id="main">
			<div id="left">
				<a href="${pageContext.request.contextPath}/user/show">查看头像</a> <img
					src="${pageContext.request.contextPath}/user/show"
					style="width: 100px; height: 100px" />
			</div>
			<div id="right">
				<h3>${li}</h3>
				<hr>
				<h4>${singer}</h4>
				<c:if test="${type==1}">
				<div class="continue-button">
					<a href="<%=ctx%>/singer3.jsp?realName=${li}">上传歌曲</a>
				</div>
				</c:if>
			</div>
		</div>
		<br>



		<div class="copyrights">
			Collect from <a href="http://www.cssmoban.com/"></a>
		</div>

		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

			<div class="main-grids">
				<div class="top-grids">
					<div class="recommended-info">
						
						<h3>历史听歌</h3>
						<hr style="height:3px;border:none;border-top:3px ridge red;" >

						<table id="infoTable" name="infoTable" width="810" height="30"
							border="0" cellpadding="0" cellspacing="0" class="tbBorder">
							<tr>
								<td><font size="4">歌曲名</td>
								<td>&emsp;&emsp;&emsp;<font size="4">歌手</td>
								<td>&emsp;&emsp;&emsp;<font size="4">时长</td>
							</tr>
							<c:forEach items="${songs}" var="list">
								<tr>
									<td><a
										href="<%=ctx%>/song/selectSongById?songId=${list.songId}"><font
											size="4">${list.songName}</a></td> &emsp;&emsp;
									<td><font size="4">&emsp;&emsp;${list.singer}</td>
									&emsp;&emsp;
									<td><font size="4">&emsp;&emsp;${list.time}</td>
								</tr>
							</c:forEach>
						</table>
					</div>
				</div>
			</div>
		</div>

		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="main-grids">
				<div class="recommended">
					<div class="recommended-grids">
						<div class="recommended-info">
							<h3>创建的歌单</h3>
							<hr style="height:3px;border:none;border-top:3px ridge red;" >
						</div>
						<script src="js/responsiveslides.min.js"></script>
						<script>
							// You can also use "$(window).load(function() {"
							$(function() {
								// Slideshow 4
								$("#slider3")
										.responsiveSlides(
												{
													auto : true,
													pager : false,
													nav : true,
													speed : 500,
													namespace : "callbacks",
													before : function() {
														$('.events')
																.append(
																		"<li>before event fired.</li>");
													},
													after : function() {
														$('.events')
																.append(
																		"<li>after event fired.</li>");
													}
												});

							});
						</script>
						<div id="top" class="callbacks_container">
							<ul class="rslides" id="slider3">
								<li>
									<div class="animated-grids">
										<c:forEach items="${list}" var="list">
											<div
												class="col-md-3 resent-grid recommended-grid slider-first">
												<div class="resent-grid-img recommended-grid-img">
													<a
														href="<%=ctx%>/song/selectSongByList?listId=${list.listId}&&userId=${list.userId}"><img
														src="${list.imgpath}" alt="" /></a>
													<div class="time small-time slider-time">
														<p>时长</p>
													</div>
													<div class="clck small-clck">
														<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
													</div>
												</div>

												<div class="resent-grid-info recommended-grid-info">
													<h5>
														<a
															href="<%=ctx%>/song/selectSongByList?listId=${list.listId}&&userId=${list.userId}"
															class="title">${list.listName}</a>
													</h5>
													<div class="slid-bottom-grids">
														<div class="slid-bottom-grid">
															<p class="author author-info">
																<a href="#" class="author"></a>
															</p>
														</div>
														<div class="slid-bottom-grid slid-bottom-right">
															<p class="views views-info">${list.clickCounts}</p>
														</div>
														<div class="clearfix"></div>
													</div>
												</div>
											</div>
										</c:forEach>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
</html>